<template>
  <div id="Login">
    <div class="login_box">
      <div class="item login_left">
        <el-image class="login_left_img" :src="src" fit="contain" />
      </div>
      <div class="item login_right">
        <el-form ref="LoginruleForm" :model="LoginRuleForm" :rules="Loginrules" size="small" label-width="0px" class="login_form">
          <div class="return_box">
            <el-button type="text" @click="Back">
              返回
              <i class="el-icon-right" />
            </el-button>
          </div>
          <h4>欢迎来到某某平台</h4>
          <!-- 登录 -->
          <div v-if="RegisteredStart === false">
            <h5>登录</h5>
            <el-form-item prop="username">
              <el-input v-model="LoginRuleForm.username" prefix-icon="el-icon-user" clearable placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="LoginRuleForm.password" prefix-icon="el-icon-lock" clearable show-password placeholder="请输入密码" />
            </el-form-item>
            <div class="remember_box">
              <el-form-item class="remember_left">
                <el-checkbox-group v-model="LoginRuleForm.remember" class="remember">
                  <el-checkbox label="记住密码" name="type" />
                </el-checkbox-group>
              </el-form-item>
              <el-form-item class="remember_right">
                <el-button type="text" size="small" @click="ForgotPassword">忘记密码</el-button>
              </el-form-item>
            </div>
          </div>
          <!-- 登录END -->
          <!-- 注册 -->
          <div v-else>
            <h5>注册</h5>
            <el-form-item prop="username">
              <el-input v-model="LoginRuleForm.username" prefix-icon="el-icon-user" clearable placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="LoginRuleForm.password" prefix-icon="el-icon-lock" clearable show-password placeholder="请输入密码" />
            </el-form-item>
          </div>
          <!-- 注册END -->
          <el-form-item v-if="RegisteredStart === false">
            <el-button size="small" type="primary" :loading="LoginLoading" @click="Login('LoginruleForm')">登录</el-button>
            <el-button size="small" @click="Registered(RegisteredStart, 'LoginruleForm')">注册</el-button>
          </el-form-item>
          <el-form-item v-else>
            <el-button size="small" type="primary" :loading="SubmitFormLoading" @click="SubmitForm('LoginruleForm')">提交</el-button>
            <el-button size="small" @click="Registered(RegisteredStart, 'LoginruleForm')">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      src: require('@/assets/images/login/login_left.png'),
      // 登录表单
      LoginRuleForm: {
        username: 'admin', // 用户名
        password: '123456', // 密码
        remember: ['记住密码'] // 记住密码
      },
      // 登录表单验证
      Loginrules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '长度不小于6个字符', trigger: 'blur' }
        ]
      },
      // 注册OR返回状态
      RegisteredStart: false,
      // 登录按钮加载状态
      LoginLoading: false,
      // 注册提交按钮加载状态
      SubmitFormLoading: false
    }
  },
  /* HTML DOM加载后马上执行的，如赋值 */
  computed: {},

  /* 观察Vue实例上的数据变动 */
  watch: {},

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {},

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {},

  /* methods则必须要有一定的触发条件才能执行 */
  methods: {
    // 忘记密码
    ForgotPassword() {
      console.log('忘记密码')
    },
    // 登录
    Login(formName) {
      console.log('登录', formName)
      this.LoginLoading = true
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('验证通过')
          // 定时器3秒后关闭按钮加载状态，同时跳转home
          setTimeout(() => {
            this.LoginLoading = false
            // 路由跳转至首页
            this.$router.push('/backstage_home')
          }, 3000)
        } else {
          console.log('验证不通过')
          this.LoginLoading = false
          return false
        }
      })
    },
    // 注册OR返沪
    Registered(RegisteredStart, formName) {
      console.log('注册', RegisteredStart)
      this.RegisteredStart = !RegisteredStart
      this.$refs[formName].resetFields()
      if (this.RegisteredStart) {
        this.LoginRuleForm = {
          username: '', // 用户名
          password: '' // 密码
        }
      } else {
        this.LoginRuleForm = {
          username: 'admin', // 用户名
          password: '123456', // 密码
          remember: ['记住密码'] // 记住密码
        }
      }
    },
    // 提交
    SubmitForm(formName) {
      console.log('提交', formName)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('提交验证通过')
        } else {
          console.log('提交验证不通过')
          return false
        }
      })
    },
    // 返回上一级
    Back() {
      console.log('返回上一级')
      this.$router.go(-1)
    }
  }
}
</script>

<style lang='scss' scoped>
  #Login {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('../../../assets/images/login/login_bg.png');
    background-size: 100% 100%;
    height: 100%;
    // background-size: cover;
    overflow: hidden;
    .login_box{
      width: 680px;
      height: 400px;
      background-color: rgba(255, 255, 255, 0.4);
      border-radius: 10px;
      position: absolute;
      left: 50%;
      top: 50%;
      /* 利用css动画使白框居中https://zhuanlan.zhihu.com/p/124706630 */
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
      .item{
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .login_left{
        width: 45%;
        .login_left_img{
          height: 100%;
          width: 100%
        }
      }
      .login_right{
        width: 55%;
        .login_form{
          .return_box{
            display: flex;
            justify-content: flex-end;
          }
          h4{
            margin: 20px 0;
            font-size: 2rem;
            color:#409EFF;
          }
          h5{
            margin: 1rem 0;
            font-size: 1.2rem;
            color:#409EFF;
          }
          .remember_box{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
          .el-button--small{
            font-size: 14px !important;
          }
        }
      }
    }
  }
</style>
